<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="工号" width="110">
        <template slot-scope="scope">{{ scope.row.staffNumber }}</template>
      </el-table-column>
      <el-table-column label="姓名" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="所属部门" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假原因">
        <template slot-scope="scope">{{ scope.row.holidayExplain }}</template>
      </el-table-column>
      <el-table-column label="起始时间" width="110" align="center">
        <template slot-scope="scope">{{ formatTime(scope.row.beginTime,"YYYY-MM-DD") }}</template>
      </el-table-column>
      <el-table-column label="结束时间" width="110" align="center">
        <template slot-scope="scope">{{ formatTime(scope.row.endTime,"YYYY-MM-DD") }}</template>
      </el-table-column>
      <el-table-column label="是否已安排工作" width="120" align="center">
        <template slot-scope="scope" >
            <span v-if="scope.row.isSchedule==1" style="color:red;font-weight:700">{{ judgeSchedule(scope.row.isSchedule) }}</span>
            <span v-if="scope.row.isSchedule==0" >{{ judgeSchedule(scope.row.isSchedule) }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template slot-scope="scope">

          <el-popover placement="bottom" width="120" style="margin-right:5px">
            <span style="margin-bottom:10px;color:red;font-weight:700">确定要批准吗</span>
            <br />
            <div style="text-align:right">
              <el-button
                type="primary"
                size="mini"
                @click="updateHolidayRecord(scope.row.id,scope.row.isSchedule,'1')"
              >批准</el-button>
            </div>
            <el-button type="primary" slot="reference">批准</el-button>
          </el-popover>

          <el-popover placement="bottom" width="120" style="margin-right:5px">
            <span style="margin-bottom:10px;color:red;font-weight:700">确定要驳回吗</span>
            <br />
            <div style="text-align:right">
              <el-button
                type="danger"
                size="mini"
                @click="updateHolidayRecord(scope.row.id,scope.row.isSchedule,'0')"
              >驳回</el-button>
            </div>
            <el-button type="danger" slot="reference">驳回</el-button>
          </el-popover>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import { getHolidayList } from "@/api/table";
import { permitOrRejectHoliday } from "@/api/table";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    formatTime(time, format) {
      return this.$moment(time)
        .utcOffset(8)
        .format(format);
    },
    judgeSchedule(sche) {
      if (sche == "0") {
        return "未安排工作";
      } else {
        return "已安排工作";
      }
    },
    fetchData() {
      this.listLoading = true;
      getHolidayList().then(res => {
        this.list = res.data.data;
        this.listLoading = false;
      });
    },
    updateHolidayRecord(id,isSchedule,approval) {
      permitOrRejectHoliday({ id: id, approval: approval })
        .then(res => {
            // 已经排了班的情况下，要提醒管理员重新设置排班
            if(isSchedule==1){
                this.$message.warning(res.data.data)
            }
            else{
                this.$message.success(res.data.data)
            }
            this.fetchData()
        })
        .catch(err => {
            this.$message.error("抱歉，服务器宕机了...")
        });
    }
  }
};
</script>
